$baseFontSize:75;
@function rem($px) {
    @return $px / $baseFontSize * 1rem;
}
//flex布局

/*
    定义弹性布局：
    主轴方向:从左到右，
    主轴对齐方式：从左到右
    交叉轴对齐方式：从上到下
*/

.flex {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flex;
}

.flex>* {
    overflow: hidden;
}


/*
    主轴方向：从左到右
*/

.flex,
.flex.flex-left {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}


/*
    主轴方向：从右到左
*/

.flex.flex-right {
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}


/*
    主轴方向：从上到下
*/

.flex.flex-top {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
}


/*
    主轴方向：从下到上
*/

.flex.flex-bottom {
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}


/*
    主轴对齐方式：两端对齐
*/

.flex.flex-main-justify {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}


/*
    主轴对齐方式：每个项目两侧的间隔相等
*/

.flex.flex-main-around {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}


/*
    主轴对齐方式：从左到右
*/

.flex,
.flex.flex-main-left {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}


/*
    主轴对齐方式：从右到左
*/

.flex.flex-main-right {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}


/*
    主轴对齐方式：居中对齐
*/

.flex.flex-main-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}


/*
     ========交叉轴定义=====
*/


/*
    交叉轴对齐方式：从上到下
*/

.flex,
.flex.flex-cross-top {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}


/*
    交叉轴对齐方式：从下到上
*/

.flex.flex-cross-bottom {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}


/*
    交叉轴对齐方式：居中对齐
*/

.flex.flex-cross-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}


/*
    交叉轴对齐方式：跟随内容高度对齐
*/

.flex.flex-cross-baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}


/*
    交叉轴对齐方式：高度并排铺满
*/

.flex.flex-cross-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}


/*
    默认，不允许子元素换行
*/

.flex,
.flex.flex-nowrap {
    -webkit-box-lines: single;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}


/*
    允许子元素换行
*/

.flex.flex-wrap {
    -webkit-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}


/*
    子元素属性：不伸缩
*/

.flex>*,
.flex>.flex-box-0 {
    -webkit-box-flex: 0.0;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}


/*
    子元素属性：自动伸缩
*/

.flex>.flex-box-1 {
    -webkit-box-flex: 1.0;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
}